<template>
  <div class="image-upload">
    <!-- 上传图片 -->
    <!--
        list-type 文件列表的类型
        action 必选参数，上传的地址
        auto-upload 是否在选取文件后立即进行上传 - 默认是true，立即上传
        file-list 上传的文件列表
        on-preview 点击文件列表中已上传的文件时的钩子
        limit 控制上传的数量
        on-remove 文件列表移除文件时的钩子
        http-request 覆盖默认的上传行为，可以自定义上传的实现
        on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
    -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePreview"
      :limit="limit"
      :class="{disabled: isDisabled}"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 准备一个对话框 - 预览图片 -->
    <el-dialog title="图片预览" :visible="showDialog" width="600px" @close="showDialog = false">
      <img :src="imgUrl" alt="" style="width: 100%;">
    </el-dialog>
    <!-- 进度条 -->
    <!-- <el-progress :percentage="percentage" style="width: 300px;" /> -->
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)

const cos = new COS({
  SecretId: 'AKIDiGZdS1LPEn7C2f3C6lBMIzQcYFgsoVx9', // 身份识别ID
  SecretKey: '0mKdiZBXdU5RYP1NULxJQIuHPHuHPHuH' // 身份秘钥
})

export default {
  name: 'ImageUpload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      showDialog: false, // 对话框的显示隐藏
      imgUrl: '', // 显示的图片路径
      // percentage: 0, // 图片上传的进度
      fileList: [
        // {
        //   name: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // },
        // {
        //   name: 'food2.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
      ]
    }
  },
  computed: {
    isDisabled() {
      return this.fileList.length >= this.limit
    },
    // 所有的文件都上传成功
    isAllUploadSuccess() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    // 预览图片
    handlePreview(file) {
      // console.log(file)
      // 显示图片预览的对话框
      this.showDialog = true
      // 显示图片
      this.imgUrl = file.url
    },
    // 移除图片 - 问题：只有结构发生了变化，数据没有更新
    handleRemove(file, fileList) {
      // file：删除的文件对象
      // fileList：结构中的文件列表
      // console.log(file, fileList)
      // 更新data中的数据 - 数组 - 复杂数据类型
      // 方式一
      // this.fileList = [...fileList]
      // 方式二
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    // 添加文件时，手动更新数据
    handleChange(file, fileList) {
      this.fileList = [...fileList]
    },
    // 文件上传之前的校验
    handleBeforeUpload(file) {
      // file：上传的文件对象
      // console.log('上传文件之前', file)
      // 上传的文件大小：小于2M
      const isLt2M = file.size / 1024 / 1024 < 2

      // 小于2M，校验成功
      if (isLt2M) {
        return true
      }

      this.$message({
        message: '上传的图片大小不能超过2M',
        type: 'warning'
      })
      return false
    },
    // 上传文件 - 上传成功之后发送请求
    handleUpload(obj) {
      // obj.file：上传的文件对象
      // console.log('待上传的文件', obj.file)
      // 要修改上传的图片的地址/状态
      // 找到上传的图片
      const uid = obj.file.uid
      const fileObj = this.fileList.find(item => item.uid === uid)
      // console.log(fileObj)
      // 文件上传时自带的进度条
      fileObj.status = 'uploading'
      // 上传文件
      cos.putObject({
        Bucket: 'hrsass-demo-1312320347', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-shanghai', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: 'mql-' + Date.now() + '-' + obj.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        StorageClass: 'STANDARD', // 设置对象存储类型: 标准
        Body: obj.file, // 上传文件对象
        // 上传的进度 - 实时触发
        onProgress: progressData => {
          // console.log('图片上传的进度', progressData)
          // this.percentage = parseInt(progressData.percent * 100)
          fileObj.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        if (err) return console.log('上传失败', err)
        // console.log('上传成功', data)
        // 上传成功之后，修改图片地址 - 原来的时blob地址 - 临时预览
        fileObj.url = 'https://' + data.Location
        // 右上角的对勾
        // 如果用户网速很快，而且上传的图片较小
        setTimeout(() => {
          fileObj.status = 'success'
        }, 300)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
